<template>
	<view class="main">
		<view class="top">
			<view class="top_adr" @click="fanhui()">
				<image src="../../static/img/turn2.png" mode="widthFix"></image>
			</view>
			<text class="top_tit t25">广告管理</text>
			<!-- <view class="top_text t3" @click="toufang()">添加广告 +</view> -->
		</view>
		<view class="bai"></view>
		<view class="msg_list" v-for="(item,index) in adlist" :key="index">
			<view class="msg_list_img">
				<image :src="item.picUrl" mode="aspectFill">
			</view>
			<view class="msg_list_tit t1">
				<text class="msg_list_text t1">
					<!-- // belongId: 用户id
					// status:状态 -3审核  -2驳回 -1删除 0已停用 1已启用
					// amount:单条广告价格,单位分
					// collect 是否采集1是0否
					// sell是否销售1是0否
					// totalnum购买条数
					// lastnum剩余条数
					// type广告类型1视频0图片
					 -->
					<text class="msg_list_tab t3" v-if="item.sell==1">推荐商品</text>
					<text class="msg_list_tab t3" v-if="item.collect==1">收集信息</text>
					{{item.title}}
				</text>
				<!-- <text class="msg_list_text t5">{{item.content}}</text> -->
				<text class="msg_list_text t5">剩余条数：
					<text class="t12">{{item.lastNum}}</text>
					<text class="t5">/{{item.totalNum}}</text>
					次
				</text>
				<text class="msg_list_text t5">广告状态：
					<text class="t5" v-if="item.status==-3">审核中</text>
					<text class="t5" v-if="item.status==-2">驳回</text>
					<text class="t5" v-if="item.status==0">已停用</text>
					<text class="t5" v-if="item.status==1">正常</text>
				</text>
				<text class="msg_list_text t5">广告归属：
					<text class="t5" v-if="item.placement== 1">支付后视频</text>
					<text class="t5" v-if="item.placement== 2">视频号</text>
				</text>
			</view>
			<view class="distance-box">
				<text class="msg_list_text t5" style="width: 750rpx;">单条价格：
					<text class="t5">{{(item.amount / 100).toFixed(2)}}元</text>
				</text>
				<text class="msg_list_text t5">距离：
					<text class="t5" v-if="item.placement== 1">{{item.distance}}km</text>
				</text>
				<text class="msg_list_text t5">类型：
					<text class="t5" v-if="item.collect== 1 && item.sell == 0">{{'采集'}}</text>
					<text class="t5" v-if="item.collect== 0 && item.sell == 1">{{'销售'}}</text>
					<text class="t5" v-if="item.collect== 0 && item.sell == 0">{{'展示'}}</text>
				</text>
			</view>
			<!-- <view class="msg_list_li t5" style="margin-top: 4vw;margin-bottom: 4vw;" v-if="item.status==-3||item.status==-2||item.status==-4"> 
				<view class="msg_list_le t5">广告信息</view>
				<view class="msg_list_ri t1">
					<view class="msg_but1 t3" @click="list(item.id)" style="margin: 0;float: right;margin-top: 1vw;margin-left: 2vw;">修改</view>
				</view>
			</view> -->
			<view class="msg_list_li t5" style="margin-bottom: 4vw;">
				<!-- v-if="item.adSell" -->
				<view class="msg_but1 t12" @click="pro(item.id)" v-if="item.status==-2">编辑商品信息</view>
				<view class="msg_but1 t12" @click="list(item.id)" v-if="item.status==-2">编辑广告信息</view>
				<view class="msg_but1 t12" v-if="item.status==1" @click="ting(item.id)">停用</view>
				<view class="msg_but1 t12" v-if="item.status==0" @click="qi(item.id)">启用</view>
				<view class="msg_but1 t12" @click="dels(item.id)">删除</view>
				<!-- 	<view class="msg_but1 t12" @click="list(item.id)"
					style="margin: 0;float: left;margin-top: 1vw;margin-right: 2vw;">修改广告信息</view> -->
				<!-- 广告状态为-3审核中 -2已禁用 -4审核驳回之后才可以修改 -->
				<!-- <view class="msg_list_le t5"></view> -->
				<!-- <view class="msg_list_ri t1"> 
					<view class="msg_but1 t3" @click="pro(item.id)"
						style="margin: 0;float: right;margin-top: 1vw;margin-left: 2vw;">修改</view>
				</view> -->
			</view>
			<!-- v-if="item.status!=-3&&item.status!=-2" -->
			<!-- v-if="item.status!=-3&&item.status!=-2" -->
			<view class="msg_but t3" @click="goumai(item.id,item.amount,item.sell,item.placement)">购买条数</view>
			<view class="msg_but t3" v-if="item.sell==1&&item.status!=-3" @click="order(item.id)">查看商品订单</view>
			<view class="msg_but t3" v-if="item.collect==1&&item.status!=-3" @click="caiji(item.id)">查看采集信息</view>
		</view>
		<view class="zanwu" v-show="jiazai" style="padding-top: 4vw;"><text class="t7">{{more}}</text></view>
		<view class="bai"></view>
		<view class="zanwu" v-show="zanwu">
			<image src="../../static/img/kong.png" mode="widthFix"></image><text class="t8">{{wu}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				adlist: [],
				Inv: 0,
				mainid: '',
				pages: 1,
				ismore: true,
				more: '加载更多',
				jiazai: false,
				wu: "暂无数据",
				zanwu: false,
				adimg: [],
			}
		},
		onLoad() {

		},

		// 监听触底
		onReachBottom() {
			//阻止重复加载
			if (this.ismore == false) {
				return;
			}
			// console.log(1);
			this.pages++;
			this.mlist();

		},
		onShow() {
			var _this = this;
			uni.getStorage({
				key: 'user',
				success: function(res) {
					_this.mainid = res.data.id;		
					_this.adlist = [];
					_this.mlist();
					// console.log(_this.mainid);
					// _this.mlist();
				}
			});
			// setTimeout(function(){	
			// },1000);
		},
		methods: {
			fanhui() {
				uni.navigateBack({
					delta: 1
				})
			},
			toufang() {
				uni.navigateTo({
					url: '/pages/ad/ad'
				});
			},
			qi(id) {
				var _this = this;
				uni.showModal({
					title: '',
					content: '确定要启用此广告吗',
					success: function(res) {
						if (res.confirm) {
							_this.qiyong(id);
							// console.log('用户点击确定');
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				});
			},
			dels(id) {
				var _this = this;
				uni.showModal({
					title: '确定要删除此广告吗',
					content: '温馨提示：删除广告后，购买的广告条数会返回到您的支付宝或微信上。',
					success: function(res) {
						if (res.confirm) {
							_this.dell(id);
							// console.log('用户点击确定');
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				});
			},
			dell(id) {
				var _this = this;
				console.log(id)
				uni.request({
					header: {
						'Content-Type': 'application/x-www-form-urlencoded', //自定义请求头信息
					},
					url: getApp().globalData.url + 'ad/delAd/' + id, //仅为示例，并非真实接口地址。
					method: 'POST',
					data: {
						id: id //	用户ID		true							string
					},
					success: (res) => {
						console.log(res);
						uni.hideLoading(); //关闭加载动画
						if (res.data.status == '200') {
							uni.showToast({
								title: '删除成功',
								icon: 'none',
								duration: 2000
							});
							setTimeout(function() {
								_this.mlist();
							}, 2000);
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								duration: 4000
							});
						}
					},
					fail: (error) => {
						// this.checks = true
						console.log(error)
					}
				});
			},
			qiyong(id) {
				var _this = this;
				uni.request({
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
					},
					url: getApp().globalData.url + 'ad/adEnabled', //仅为示例，并非真实接口地址。
					method: 'POST',
					data: {
						id: id, //	广告ID		true							string
						status: 1, //	状态		false							integer
						userId: this.mainid //	用户ID		true							string
					},
					success: (res) => {
						console.log(res);
						uni.hideLoading(); //关闭加载动画
						if (res.data.status == '200') {
							uni.showToast({
								title: '启用成功',
								icon: 'none',
								duration: 2000
							});
							setTimeout(function() {
								_this.mlist();
							}, 2000);
						}
					},
					fail: (error) => {
						// this.checks = true
						console.log(error)
					}
				});
			},
			ting(id) {
				var _this = this;
				uni.showModal({
					title: '确定要停用此广告吗',
					content: '停用后，若不想再开启且有条数还未播完，请联系客服退款。',
					success: function(res) {
						if (res.confirm) {
							_this.tingyong(id);
							// console.log('用户点击确定');
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				});
			},
			tingyong(id) {
				var _this = this;
				uni.request({
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
					},
					url: getApp().globalData.url + 'ad/adDeactivate', //仅为示例，并非真实接口地址。
					method: 'POST',
					data: {
						id: id, //	广告ID		true							string
						status: 0, //	状态		false							integer
						userId: this.mainid //	用户ID		true							string
					},
					success: (res) => {
						console.log(res);
						uni.hideLoading(); //关闭加载动画
						if (res.data.status == '200') {
							uni.showToast({
								title: '停用成功',
								icon: 'none',
								duration: 2000
							});
							setTimeout(function() {
								_this.mlist();
							}, 2000);
						}
					},
					fail: (error) => {
						// this.checks = true
						console.log(error)
					}
				});
			},
			bindPickerChange: function(e) {
				this.Inv = e.detail.value
			},
			caiji(id) {
				uni.navigateTo({
					url: '/pages/order/infolist?id=' + id
				});
			},
			order(id) {
				uni.navigateTo({
					url: '/pages/order/orderlist?id=' + id
				});
			},
			myTeam(type, pages) {
				var _that = this;
				_that.Inv = type;
			},
			goumai(e, a,sell,placement) {
				// console.log(e);
				uni.navigateTo({
					url: '/pages/ad/ad_goumai?id=' + e + '&amount=' + a/100 + '&sell=' + sell+ '&placement=' + placement
				});
			},
			list(id) {
				uni.navigateTo({
					url: '/pages/ad/ad?id=' + id
				});
			},
			pro(id) {
				// if (dptit) {
				uni.navigateTo({
					url: '/pages/ad/ad_pro?id=' + id
				});
				// } else {
				// 	uni.navigateTo({
				// 		url: '/pages/ad/ad_pro?id=' + id
				// 	});
				// }
			},
			tup(id, i) {
				var _this = this;
				// console.log(id);
				uni.request({
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
					},
					url: getApp().globalData.url + 'file/getFile', //仅为示例，并非真实接口地址。
					method: 'POST',
					data: {
						id: id
					},
					success: (res) => {
						console.log(res);
						uni.hideLoading(); //关闭加载动画
						if (res.data.status == '200') {
							var aa = res.data.data.domain + res.data.data.localPath;
							console.log(aa);
							let p = _this.pages - 1;
							if (p == 0) {
								let imgl = [];
								imgl.push(aa);
								_this.adimg[p] = imgl;
							}
							// _this.adimg.push(aa);
							// console.log(_this.adlist[i].picId);

							this.$forceUpdate()
						}
					},
					fail: (error) => {
						// this.checks = true
						console.log(error)
					}
				});
			},

			mlist() {
				var _this = this;
				uni.showLoading();
				// console.log(_this.pages);
				console.log('this.mainid:'+this.mainid);
				uni.request({
					header: {
						'Content-Type': 'application/x-www-form-urlencoded', //自定义请求头信息
					},
					url: getApp().globalData.url + 'ad/myAdPage/' + _this.mainid + '/' + _this
						.pages, //仅为示例，并非真实接口地址。
					method: 'POST',
					data: {
						id: _this.mainid, //	所属人ID(mainId)		true						string
						page: _this.pages, //	page
					},
					success: (res) => {

						uni.hideLoading(); //关闭加载动画
						console.log(res.data.data.records);
						if (res.data.status == '200') {
							var len = res.data.data.pages;
							// belongId: 用户id
							// status:状态 -3审核  -2驳回 -1删除 0已停用 1已启用
							// amount:单条广告价格,单位分
							// collect 是否采集1是0否
							// sell是否销售1是0否
							// totalnum购买条数
							// lastnum剩余条数
							// type广告类型1视频0图片

							if (len == _this.pages) {
								_this.more = "没有更多数据了";
								_this.jiazai = true;
								_this.zanwu = false;
								_this.ismore = false;
							} else if (len == 0) {
								// console.log(111);
								_this.more = "暂无数据";
								_this.jiazai = false;
								_this.zanwu = true;
								_this.ismore = false;
							} else {
								_this.more = "加载更多";
								_this.jiazai = true;
								_this.zanwu = false;
								_this.ismore = true;
							}
							for (var i = 0; i < res.data.data.records.length; i++) {
								
								// console.log(i);
								// console.log(res.data.data.records[i].lastNum);
								if (res.data.data.records[i].lastNum == undefined || res.data.data.records[i]
									.lastNum == null) {
									res.data.data.records[i].lastNum = 0;
								}
								if (res.data.data.records[i].totalNum == undefined || res.data.data.records[i]
									.totalNum == null) {
									res.data.data.records[i].totalNum = 0;
								}
							}
							if (_this.pages == 1) {
								_this.adlist = res.data.data.records;

							} else {
								console.log(_this.pages);
								var list = _this.adlist;
								for (var i = 0; i < res.data.data.records.length; i++) {
									// console.log(list);
									list.push(res.data.data.records[i]);
									// console.log(res.data.data.records[i].sell);
								}
								_this.adlist = list;
								this.$forceUpdate()
							}
						} else {

							// uni.showToast({
							// 	title: res.data.msg,
							// 	icon: 'none',
							// 	duration: 2000
							// });
						}
					},
					fail: (error) => {
						uni.hideLoading();
						// this.checks = true
						uni.showToast({
							title: error,
							icon: 'none',
							duration: 2000
						});
					}
				});
			}
		}
	}
</script>

<style>
	.top {
		width: 100%;
		height: 20vw;
		position: fixed;
		top: 0vw;
		left: 0;
		padding-top: 8.5vw;
		background: #F8F8F8;
		z-index: 999;
	}

	.top_adr {
		width: auto;
		height: 12vw;
		float: left;
		position: absolute;
		top: 8vw;
		left: 0;
		padding-left: 5vw;
	}

	.top_adr text {
		width: 15vw;
		overflow: hidden;
		height: 12vw;
		position: relative;
		line-height: 12vw;
		float: left;
	}

	.top_adr image {
		width: 2.5vw;
		margin-top: 3.5vw;
		float: left;
		margin-right: 2vw;
	}

	/* 	.bai {
		width: 12vw;
		height: auto;
		display: block;
		float: left;
	} */

	.top_tit {
		width: 100%;
		height: 12vw;
		line-height: 12vw;
		text-align: center;
		float: left;
	}

	.top_text {
		width: auto;
		height: 8vw;
		line-height: 8vw;
		position: absolute;
		top: 11vw;
		right: 5vw;
		padding: 0 4vw;
		background: #F1C75E;
		border-radius: 2vw;
	}

	.inv-h-w {
		background-color: #FFFFFF;
		height: 10vw;
		display: flex;
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
	}

	.inv-h {
		font-size: 0.8rem;
		flex: 1;
		text-align: center;
		color: #333;
		height: 10vw;
		line-height: 10vw;
	}

	.inv-h-se {
		color: #F1C75E;
		border-bottom: 1vw solid #F1C75E;
	}

	.msg_list_img {
		width: 20vw;
		height: 20vw;
		display: block;
		float: left;
		overflow: hidden;
		background: #F2F2F2;
		border: 1px solid #F2F2F2;
		border-radius: 1vw;
		margin-top: 15rpx;
	}

	.msg_list_img image {
		width: 100%;
		height: 100%;
		display: block;
		float: left;

	}


	.msg_list {
		width: 100%;
		height: auto;
		display: block;
		float: left;
		box-shadow: 0px 0px 5px #F2F2F2;
		padding: 3vw;
		border-radius: 1vw;
		/* border: 1px solid #F2F2F2; */
		margin-top: 4vw;
		background: #fff;
		padding-top: 5vw;
		overflow: hidden;
	}

	.msg_list_tit {
		width: 74%;
		margin-left: 2%;
		height: auto;
		display: block;
		float: left;
		padding: 0;
		position: relative;
	}

	.msg_list_text {
		width: 100%;
		height: 6vw;
		display: block;
		float: left;
		/* margin:0 1vw; */
		line-height: 6vw;
		overflow: hidden;
		/* line-height: 8vw; */
		overflow: hidden;
		word-break: break-all;
		/* break-all(允许在单词内换行。) */
		text-overflow: ellipsis;
		/* 超出部分省略号 */
		display: -webkit-box;
		/** 对象作为伸缩盒子模型显示 **/
		-webkit-box-orient: vertical;
		/** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 1;
		/** 显示的行数 **/

	}

	.msg_list_le {
		width: 50%;
		height: auto;
		display: block;
		float: left;
		line-height: 10vw;
	}

	.msg_list_ri {
		width: 50%;
		height: auto;
		display: block;
		float: left;
		text-align: right;
		line-height: 10vw;
	}

	.bai {
		width: 100%;
		height: 18vw;
		display: block;
		float: left;
	}

	.msg_but {
		width: auto;
		height: 8vw;
		line-height: 8vw;
		padding: 0 2vw;
		background: #F1C75E;
		display: block;
		float: left;
		border-radius: 2vw;
		margin-right: 2vw;
		margin-bottom: 2vw;
	}

	.msg_but1 {
		width: auto;
		height: auto;
		line-height: 6vw;
		/* text-decoration: underline; */
		/* padding: 0 3vw; */
		/* background: #8ecce5; */
		display: block;
		float: left;
		border-bottom: 1px solid #F1C75E;
		padding-top: 2vw;
		/* border-radius: 2vw; */
		margin-right: 2vw;
		/* margin-bottom: 1vw; */
	}

	.msg_list_li {
		width: 100%;
		height: auto;
		display: block;
		float: left;
	}

	.msg_list_tab {
		/* border: 1px solid #F1C75E; */
		background: #71b838;
		width: auto;
		display: block;
		float: left;
		padding: 0 2vw;
		border-radius: 0 0 0 2vw;
		margin-right: 2vw;
		height: 6vw;
		line-height: 6vw;
		position: absolute;
		top: -5vw;
		right: -5.5vw;
	}
	.distance-box{
		display: flex;
		width: 100%;
		height: 40rpx;
	}
</style>
